<template>
  <!-- 催收执行页 -->
  <section class="page component collection-execution">
    <div class="top-button-style">
      <!-- <el-button
        @click="speechContent = true"
        class="search-button white-button"
        v-if="!hiddenAction"
        >话术</el-button
      > -->
      <div class="tip-style">
        <!-- <i class="el-icon-bell"></i>
        <span
          >张晓委托你在 2020-11-10 23:59:59
          前为此案件的代理经办代号催收此案件</span
        > -->
        <!-- <i class="el-icon-phone icon-style" v-if="this.loginStatus && !tips" style="font-size: 20px;" @click="toggleShowWechat"></i> -->
        <i class="el-icon-phone icon-style" v-if="this.loginStatus && !tips && !hiddenAction && menuChannel !== 44 && menuChannel !== 34 && menuChannel !== 4 && menuChannel !== 18 && menuChannel !== 58" style="font-size: 20px;" @click="toggleShowWechat"></i>
        <i class="el-icon-bell" v-if="!tips || !tips.includes('null')"></i>
        <el-carousel height="36px" direction="vertical" :autoplay="false" v-if="!tips|| !tips.includes('null')">
          <el-carousel-item v-for="item in 4" :key="item">
            <h5 class="el-small-scroll">{{ tips }}</h5>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="button-style">
        <el-popover width="300" trigger="hover" placement="bottom" v-if="callId && !isHangUp">
          <call-bar />
          <el-button slot="reference" icon="el-icon-microphone" class="call-bar-trigger" circle></el-button>
        </el-popover>
        <!-- 控制热键显示权限 -->
        <notepad class="collection-hotkey" :carFrameNo="model.carFrameNo" :model="model"></notepad>
        <collection-hotkey class="collection-hotkey" v-if="!hiddenAction && menuChannel !== 44 && menuChannel !== 34 && menuChannel !== 4 && menuChannel !== 18 && menuChannel !== 58" :carFrameNo="model.carFrameNo" :model="model"></collection-hotkey>
        <el-button @click="activeStopCase" v-if="hiddenAction && menuChannel !== 44" class="search-button white-button">停催激活</el-button>
        <el-button @click="back" class="search-button white-button">返回</el-button>
      </div>
      <!-- 快捷菜单 -->
    </div>
    <div class="connect-box">
      <div class="information-style">
        <!-- 客户信息 -->
        <div class="customer-style">
          <customer-information :model="model" />
          <!-- 客户下的账户号 -->
          <account-number-under-the-customer :caseInfoList="model.caseInfos" />
        </div>

        <!-- 账户信息 -->
        <div class="account-style">
          <account-information />
        </div>
      </div>

      <tag-model />

      <div class="tel-box">
        <collection-add-list class="add-list-box left-box" />

        <div class="right-box" v-if="!hiddenAction">
          <collection-action-area :topInfo="model" />
        </div>
      </div>

      <collection-history-info></collection-history-info>
    </div>

    <!-- 话术查看 -->
    <el-dialog :visible.sync="speechContent" @open="$nextTick(() => $refs['speech-content'].refresh())" append-to-body>
      <speech-content ref="speech-content"></speech-content>
    </el-dialog>

    <el-dialog title="案件停催激活" width="600px" :visible.sync="caseActive" show-close :close-on-click-modal="false" :close-on-press-escape="false" append-to-body @closed="refreshData()">
      <el-form :model="cancelReason" ref="cancelReasonRef" :rules="cancelReasonRule" class="cancelReason">
        <el-form-item label="停催激活原因" prop="text">
          <el-input :disabled="hiddenAction && menuChannel !== 1 && menuChannel !== 2 && menuChannel !== 15 && menuChannel !== 16" v-model="cancelReason.text" type="textarea" style="width: 78%" rows="5"></el-input>
        </el-form-item>
        <div class="operate-buttons">
          <div v-if="hiddenAction && menuChannel !== 1 && menuChannel !== 2 && menuChannel !== 15 && menuChannel !== 16">
            <el-button size="mini" @click="cancelDialog">关闭</el-button>
          </div>
          <div v-else>
            <el-button size="mini" @click="cancelDialog">取消</el-button>
            <el-button size="mini" @click="cancelCommit">提交</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

import { Dependencies } from "~/core/decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import CollectionAddList from "~/components/collection-execution/collection-add-list.vue";
import CollectionActionArea from "~/components/collection-execution/collection-action-area.vue";
import CollectionHistoryInfo from "~/components/collection-execution/collection-history-info.vue";
import CollectionHotkey from "~/components/collection-execution/collection-hotkey.vue";
import SpeechContent from "~/components/collection-execution/collection-speech/speech-content.vue";
import { State, Mutation, namespace } from "vuex-class";
import { CODE_PARAMETERS } from "~/config/enum.config";
import TagModel from "~/components/collection-execution/tag-model.vue";
const CollectionExecutionModule = namespace("collection-execution");
const workspaceModule = namespace("workspace");
import AccountNumberUnderTheCustomer from "~/components/collection-execution/account-number-under-the-customer.vue";
import CustomerInformation from "~/components/collection-execution/customer-information.vue";
import AccountInformation from "~/components/collection-execution/account-information.vue";
import { UserService } from "~/services/management-service/user.service";
import Telephone from "~/components/collection-execution/collection-add-list/telephone-book.vue";
import CallBar from "~/components/call-center/call-bar.vue";
import Notepad from '~/components/collection-execution/collection-hotkeys-button/notepad-button.vue'
import { CasePauseActiveService } from "~/services/domain-service/case-pause-active.service";
import { CaseInfoService } from "~/services/domain-service/case-info.service";
import store from "~/store";
const callCenterStore = namespace("call-center");
import legalUrgeActionArea from "~/components/collection-execution/collection-action-area/legal-urge-action-area.vue";

@Component({
  components: {
    CollectionAddList,
    CollectionActionArea,
    CollectionHistoryInfo,
    CollectionHotkey,
    SpeechContent,
    TagModel,
    AccountNumberUnderTheCustomer,
    CustomerInformation,
    AccountInformation,
    Telephone,
    CallBar,
    legalUrgeActionArea,
    Notepad
  }
})
export default class CollectionExecution extends Vue {
  @Dependencies(CaseInfoService)
  private CaseInfoService: CaseInfoService;
  @Dependencies(CasePauseActiveService)
  private CasePauseActiveService: CasePauseActiveService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(UserService)
  private userService: UserService;

  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private caseNo
  @CollectionExecutionModule.State private menuChannel
  // menuChannel 34 case 2 taem

  @CollectionExecutionModule.State private hiddenAction: boolean;
  @workspaceModule.Mutation private updatedIsMessageShow;
  @workspaceModule.Mutation private updateMessageBoxVisible;
  @CollectionExecutionModule.Mutation private updatePersonalNo;
  @CollectionExecutionModule.Mutation private updateCaseNo;
  @CollectionExecutionModule.Mutation private updateObjectiveCode;
  @CollectionExecutionModule.Mutation private updateLeaveCode;
  @CollectionExecutionModule.Mutation private updatePersonalName;
  @callCenterStore.Mutation private updateIsHangUp;

  @workspaceModule.State private isMessageShow;
  @callCenterStore.State private callId;
  @callCenterStore.State private isHangUp;
  @callCenterStore.State private loginStatus!: boolean;


  private speechContent: boolean = false;
  private caseActive: boolean = false;

  private model: any = {};
  private tips: any = '';
  private cancelReasonRule: any = {
    text: [{ required: true, message: "请输入原因" }]
  }
  private cancelReason: any = {
    text: ''
  }
  private mounted () {
    this.refreshData();
    this.getObjectiveCode();
    this.getLeaveCodeData();
    this.updateIsHangUp(false);
  }

  private toggleShowWechat () {
    const WebAgent = (window as any).WebAgent
    if (WebAgent.WaChat && this.loginStatus) {
      WebAgent.WaChat.toggle()
    }
  }

  private activeStopCase () { // 停催激活
    this.caseActive = true
  }
  private cancelDialog () { // 停催弹框取消
    const refs: any = this.$refs['cancelReasonRef']
    refs.resetFields()
    this.caseActive = false;
    this.cancelReason.text = ''
  }

  private cancelCommit () { // 停催弹框提交
    const refs: any = this.$refs['cancelReasonRef']
    refs.validate(valid => {
      if (!valid) return false;
      this.CasePauseActiveService.casePauseActive({
        caseIds: this.caseId.split(','),
        caseNumber: this.caseNo,
        applyCategory: 'PAUSE_CASE_ACTIVE',
        applyDescription: this.cancelReason.text,
        casePauseDueDate: '2021-03-01',
        caseHaltCategory: 'CASE_HALT'
      }).subscribe(data => {
        this.caseActive = false;
        this.$message.success('操作成功')
      })
    })
  }

  private refreshData () {
    this.caseOperatorPageService
      .queryPersonalInfo(this.caseId)
      .subscribe(data => {
        this.updatePersonalNo(data.personalNo);
        this.updateCaseNo(
          data.caseInfos.length ? data.caseInfos[0].caseNumber : ""
        );
        this.caseStatus()
        this.updatePersonalName(data.personalName);
        this.model = {
          ...data,
          registeredCapital: this.$filter.toThousands(data.registeredCapital),
          overdueAmount: this.$filter.toThousands(data.overdueAmount),
          latelyPayAmount: this.$filter.toThousands(data.latelyPayAmount),
          income: this.$filter.toThousands(data.income)
        };
      });
    
  }

  private getTips () { // 获取提示信息
    this.tips = ''
    this.CaseInfoService.caseApplyAgentTip({
      caseNumber: this.caseNo
    }).subscribe(data => {
      this.tips = data.pageTipContent
    })
  }

  private caseStatus () { // 案件状态
    this.tips = ''
    this.CasePauseActiveService.checkCasePauseActive({
      applyId: this.caseId,
      caseNumber: this.caseNo
    }).subscribe(data => {

      console.log('data', data);

      if (data.pauseOrActive) {
        this.tips = data.pageTipContent
        store.commit('collection-execution/updateHiddenAction', true)
      } else {
        this.getTips()
        store.commit('collection-execution/updateHiddenAction', false)
        console.log('to updateHiddenAction');
      }
    })
  }

  private back () {
    this.$router.back();
    if (this.isMessageShow) {
      this.updateMessageBoxVisible(true);
      this.updatedIsMessageShow(false);
    }
  }
  // 客观码
  private getObjectiveCode () {
    this.userService
      .findAlreadyEffectCodeByType({ code: CODE_PARAMETERS.KG_CODE })
      .subscribe(data => {
        this.updateObjectiveCode(data);
      });
  }

  // 留案原因码
  private getLeaveCodeData () {
    this.userService
      .findAlreadyEffectCodeByType({ code: CODE_PARAMETERS.LA_CODE })
      .subscribe(data => {
        this.updateLeaveCode(data);
      });
  }
}
</script>

<style lang="less" scoped>
.page.collection-execution {
  position: relative;
  min-width: 1580px;

  .box-card {
    margin-top: 8px;
    max-height: 500px;
  }
  .acc-center-body {
    .no-left-padding {
      padding-left: 0;
    }
    .left {
      flex-basis: 400px;
      padding-left: 0;
    }
    .right {
      flex: 1;
      padding-left: 0px;
      padding-right: 0;
    }
  }
  .pending-collection-query {
    position: fixed;
    top: 100px;
    left: 0px;
    z-index: 100;
  }
  // .collection-hotkey {
  //   position: fixed;
  //   top: 150px;
  //   right: 0px;
  //   z-index: 100;
  // }
  .collection-agent-phone {
    position: fixed;
    top: 100px;
    right: 0px;
    z-index: 100;
  }
  .case-list-container {
    .case-list-header {
      padding: 4px;
      min-width: 34px;
      font-size: 14px;
      color: #fff;
      font-weight: bold;
      background: #265bb0;
      text-align: left;
      cursor: pointer;
    }
    top: 120px;
    position: fixed;
    right: 18px;
    z-index: 1000;
    background-color: #fff;
    border-radius: 5px 0 0 5px;
  }
  .case-list-container-left {
    .case-list-header {
      padding: 4px;
      min-width: 34px;
      font-size: 14px;
      color: #fff;
      font-weight: bold;
      background: #265bb0;
      text-align: right;
      cursor: pointer;
    }
    top: 120px;
    position: fixed;
    left: 18px;
    z-index: 1000;
    background-color: #fff;
    border-radius: 5px 0 0 5px;
  }
}
</style>
<style lang="less">
@import '~@/assets/styles/transition.less';

.page.collection-execution {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .connect-box {
    flex: 1;
    overflow-y: scroll;
  }
  .top-button-style {
    height: 36px;
    background: #265bb0;
    padding-left: 5px;
    margin-left: -10px;
    display: flex;
    justify-content: space-between;
    .button-style {
      width: 54%;
      display: flex;
      justify-content: flex-end;
    }
    .search-button {
      padding: 0;
      height: 28px;
      margin: 5px;
    }
    .call-bar-trigger {
      min-width: unset !important;
      padding: 0 10px !important;
      height: 34px;
    }
  }
  .tip-style {
    color: #fff;
    width: 46%;
    position: relative;
    .el-icon-bell {
      margin: 0 10px;
      font-size: 22px;
      line-height: 36px;
    }
    /*deep* */
    .el-carousel--vertical {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 33px;
      /*deep* */
      .el-carousel--vertical {
        width: 100%;
        height: 36px;
      }
      /*deep*/
      .el-carousel__indicators {
        display: none;
      }
    }
    /*deep* */
    .el-small-scroll {
      margin: 0 !important;
      line-height: 36px;
    }
  }
  .information-style {
    display: flex;
    .customer-style {
      flex-basis: 510px;
    }
    .account-style {
      flex: 1;
    }
  }
  .acc-center-body {
    font-size: 13px;
    .component.panel {
      border-radius: 3px;
      margin-top: 8px;
      box-shadow: 0px 1px 4px 2px #ebf5ef;
      .data-box {
        .header {
          padding: 0 10px;
        }
      }
      .el-tabs {
        .el-tabs__item {
          height: 26px;
          line-height: 26px;
        }
        .el-tabs__item.is-top {
          // min-width: 80px;
          text-align: center;
          padding: 0 10px;
        }
        .el-tabs__header.is-top {
          .el-tabs__nav-wrap {
            margin-bottom: 0px;
          }
        }
        .el-tabs__header {
          margin: 0 0 10px;
        }
      }
    }
  }
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #8d8d8d63;
    &:hover {
      background-color: #8d8d8d;
    }
  }
  ::-webkit-scrollbar-track {
    width: 8px;
    background-color: #f5f5f5;
  }
  .tooitip-div {
    width: 95%;
    display: block;
    height: auto;
    border-bottom: 0;
  }
  .tel-box {
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    .right-box {
      float: left;
      margin-left: 0.5rem;
    }
    .left-box {
      float: left;
      box-shadow: 0px 1px 4px 2px #ebf5ef;
    }
  }
}
</style>
